<template>
  <div id="payEgBox">
    <div class="egText">
      权限不足，该功能为{{lowestVipName}}及以上会员可用<span @click="toEgImg">查看示例图</span>
    </div>
    <div class="payEgBottomBox">
      <!-- 左 -->
      <div class="payEgLeft">
        <ul class="ul01">
          <li>
            <div class="s1">
              <p><img src="@/assets/meng/b6.png" />Plus</p>
              <p>精细化账号内容运营涨粉，助力直播电商变现</p>
              <img src="@/assets/meng/line_plus.png" />
              <p>尊享全部基础分析功能</p>
              <p>￥<span>3888</span>/月</p>
              <!-- <button @click="$emit('return_back', '0')">升级会员</button> -->
            </div>
          </li>
        </ul>
        <ul class="ul02">
          <li>
            <div v-for="(item, index) in response01.listvip" :key="'f' + index">
              <p class="p1">{{ item.moduleName }}</p>
              <p
                class="p2"
                v-for="(item_son, index) in item.subList"
                :key="'son' + index"
              >
                <span>{{ item_son.moduleName }}</span>
                <span
                  class="font_style"
                  v-if="
                    item_son.permission != 'true' &&
                    item_son.permission != 'false'
                  "
                  >{{ item_son.permission }}</span
                >
                <img
                  src="@/assets/meng/b16.png"
                  v-if="item_son.permission == 'true'"
                  class="img01"
                />
                <img
                  src="@/assets/meng/b17.png"
                  v-if="item_son.permission == 'false'"
                  class="img02"
                />
              </p>
              <div class="p3"></div>
            </div>
          </li>
        </ul>
      </div>
      <!-- 右 -->
      <div class="payEgRight">
        <ul>
          <li>
            <p>购买版本</p>
            <section class="s1">
              <img src="@/assets/meng/b4.png" />
              <span class="blob">Plus</span>
              <!-- <span>￥<span class="blob">3888</span>/月</span> -->
              <!-- <button @click="$emit('return_back', '2')">更多版本</button> -->
              <div class="moreBuy" @click="toPay">
                <span>更多版本</span>
                <img src="@/assets/wang/work/moreOrange.png" alt="" />
              </div>
            </section>
          </li>
          <li>
            <p>购买时长</p>
            <section class="s2">
              <button :class="{ active: value01 == 12 }" @click="value01 = 12">
                <span class="blob">12</span>个月<img
                  src="@/assets/meng/b1.png"
                />
              </button>
              <button :class="{ active: value01 == 6 }" @click="value01 = 6">
                <span class="blob">6</span>个月<img
                  src="@/assets/meng/b1.png"
                />
              </button>
              <button :class="{ active: value01 == 1 }" @click="value01 = 1">
                <span class="blob">1</span>个月<img
                  src="@/assets/meng/b1.png"
                />
              </button>
            </section>
          </li>
          <li>
            <p>支付方式</p>
            <section class="s3">
              <button :class="{ active: value02 == 1 }" @click="value02 = 1">
                <img src="@/assets/meng/b1.png" />
              </button>
              <button :class="{ active: value02 == 2 }" @click="value02 = 2">
                <img src="@/assets/meng/b1.png" />
              </button>
              <!-- <p @click="dialog01 = true" class="pointer">企业对公转账？</p> -->
            </section>
          </li>
          <li>
            <p>实付金额</p>
            <section class="s4">
              ￥<span class="blob">{{ actual_pay }}</span>
            </section>
          </li>
        </ul>
        <div class="moneyBox">
          <p>
            <span>应付金额：</span>
            <span class="shouldSpan">￥{{ marketPrice }}</span>
          </p>
          <p>
            <span>优惠金额：</span>
            <span class="saleSpan">￥{{ payAmount }}</span>
          </p>
          <p>
            [<span>有效期至：</span> <span class="timeSpan">{{ time }}</span
            >]
          </p>
        </div>
        <div class="wxPay" v-if="wxpay">
          <vue-qr
            :size="124"
            :margin="0"
            :auto-color="true"
            :dot-scale="1"
            v-if="wx_code != ''"
            :text="wx_code"
          />
          <p>使用微信扫一扫付款</p>
        </div>
        <button class="buy" @click="buy()" v-if="!wxpay && value02 == 1">
          立即付款
        </button>
        <el-dialog
          :visible.sync="dialog01"
          width="890px"
          top="20vh"
          class="dialog01"
        >
          <div class="content">
            <p class="d1">企业对公转账说明</p>
            <p class="d2">对公转账流程</p>
            <section class="d3">
              <div>
                <img src="@/assets/meng/b7.png" />
                <p>对公打款，成功转账</p>
              </div>
              <img src="@/assets/meng/b11.png" />
              <div>
                <img src="@/assets/meng/b8.png" />
                <p>联系客服，提供凭证</p>
              </div>
              <img src="@/assets/meng/b11.png" />
              <div>
                <img src="@/assets/meng/b9.png" />
                <p>客服审核，确认到账</p>
              </div>
              <img src="@/assets/meng/b11.png" />
              <div>
                <img src="@/assets/meng/b10.png" />
                <p>开通权限，升级成功</p>
              </div>
            </section>
            <p class="d2 mb_30">对公账户信息</p>
            <p class="d4">
              <span>收款账户：</span>掌上互动（北京）科技有限公司
            </p>
            <p class="d4"><span>账户号码：</span>697330014</p>
            <p class="d4">
              <span>开户银行：</span>中国民生银行股份有限公司北京京广支行
            </p>
            <p class="d4">
              <span>地址：</span>北京市朝阳区高碑店乡半壁店村惠河南街1129号2号楼2层2003室
            </p>
            <p class="d4"><span>电话：</span> 010-57201618</p>
            <button class="d5" @click="dialog01 = false">好的</button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "payEgBox",
  components: {},
  props: {
    routerName: String,
    lowestVipNum:Number,  //当前功能最低vip版本支持
    isScale:Boolean,  //是否需要缩放
  },
  data() {
    return {
      cancel01: null,
      response01: [],
      loop: "",
      dialog01: false,
      dialog02: false,
      wxpay: false,
      value01: 12,
      value02: 1,
      should_pay: 46656,
      on_sale: 19768,
      actual_pay: 26888,
      time: "",
      wx_code: "",
      order_id: "",
      vipEndTime: "",
      marketPrice: "",
      payAmount: "",
      ratePrice: "",
      isScaleData:this.isScale?this.isScale:true
    };
  },
  computed: {
    lowestVipName(){
      let vName = '免费版';
      if(this.lowestVipNum == 1){
        vName = 'SVIP';
      }else if(this.lowestVipNum == 2){
        vName = 'Plus';
      }else if(this.lowestVipNum == 3){
        vName = '体验版';
      }else if(this.lowestVipNum == 4){
        vName = 'VIP';
      }
      return vName
    }
  },
  watch: {
    // 支付方式
    value02: function (newVal, oldVal) {
      clearInterval(this.loop);
      if (newVal == 1) {
        this.wxpay = false;
      } else {
        // 显示微信二维码
        this.getWxQr();
      }
    },
    // 购买时长
    value01: function (newVal, oldVal) {
      // console.log(newVal);
      this.GetVipPrice();
      clearInterval(this.loop);
      // 微信的话
      if (this.value02 == 2) {
        // 显示微信二维码
        console.log("wx");
        this.getWxQr();
      }
    },
    wxpay: function (newVal, oldVal) {
      if (newVal == false) {
        clearInterval(this.loop);
      }
    },
  },
  created() {
    this.get_person();
    this.GetVipPrice();
  },
  mounted() {},

  methods: {
    // 查看示例图
    toEgImg() {
      let that = this;
      // console.log("routerName", this.routerName);
      let router = this.$router.resolve({
        path: `/egImg/${that.routerName}`,
      });
      console.log(that.routerName);
      window.open(router.href, "_blank");
    },
    //   跳到支付页
    toPay() {
      let router = this.$router.resolve({
        path: `/talent_main/buy/2`,
      });
      window.open(router.href, "_blank");
    },
    get_data() {
      let that = this;
      this.$axios
        .post(
          "/api/module/getmodule",
          {},
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel01) that.cancel01();
              that.cancel01 = c;
            }),
          }
        )
        .then((response) => {
          if (response.data.code == 0) {
            this.response01 = response.data.data;
            // console.log("resize");
            // 获取支付部分的dom
            // 缩放比例 当前屏幕宽度/1902
            //缩放支付部分
            if(!this.isScaleData) return;
            that.$nextTick(() => {
              setSize();
            });
            window.onresize = function () {
              setSize();
            };            
            function setSize(){
              let boxDom = document.getElementById("payEgBox"); //获取dom
              let clientWidth = document.body.clientWidth; //屏幕可见区域宽
              let clientHeight = document.body.clientHeight; //屏幕可见区域高
              let client = clientWidth * clientHeight;
              // console.log("宽", client);
              //求缩放比例
              let scaleRate = client / 1860480;
              // console.log("scaleRate", scaleRate);
              // boxDom.style.transformOrigin = "0 0";
              if(boxDom){
                boxDom.style.transform = "scale(" + scaleRate + ")";
              }              
            }

          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    get_person() {
      let that = this;
      // console.log(111);
      this.$axios({
        method: "get",
        url: "/api/customer/getperson",
      })
        .then((response) => {
          if (response.data.code == 0) {
            that.vipEndTime = response.data.data.vipEndTime;
            let time = new Date(
              response.data.data.vipEndTime.replace(/-/g, "/")
            );
            this.time = this.timestamp(
              time.setMonth(time.getMonth() + 12) / 1000,
              "Y-M-D"
            );
            this.$watch("value01", (newValue, oldValue) => {
              switch (this.value01) {
                case 12:
                  this.should_pay = 46656;
                  this.on_sale = 19768;
                  this.actual_pay = 26888;
                  let time01 = new Date(
                    response.data.data.vipEndTime.replace(/-/g, "/")
                  );
                  this.time = this.timestamp(
                    time01.setMonth(time01.getMonth() + 12) / 1000,
                    "Y-M-D"
                  );
                  break;
                case 6:
                  this.should_pay = 23328;
                  this.on_sale = 6440;
                  this.actual_pay = 16888;
                  let time02 = new Date(
                    response.data.data.vipEndTime.replace(/-/g, "/")
                  );
                  this.time = this.timestamp(
                    time02.setMonth(time02.getMonth() + 6) / 1000,
                    "Y-M-D"
                  );
                  break;
                case 1:
                  this.should_pay = 3888;
                  this.on_sale = 0;
                  this.actual_pay = 3888;
                  let time03 = new Date(
                    response.data.data.vipEndTime.replace(/-/g, "/")
                  );
                  this.time = this.timestamp(
                    time03.setMonth(time03.getMonth() + 1) / 1000,
                    "Y-M-D"
                  );
                  break;
              }
            });
            this.get_data();
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    click_pay_succeed() {
      let that = this;
      this.$axios({
        method: "get",
        url: "/api/pay/GetOrderStatus",
        params: {
          orderid: that.order_id,
        },
      })
        .then((response) => {
          if (response.data.data.status == 1) {
            location.replace("http://dy.zsjx114.com/talent_main/workbench");
          } else {
            this.$message({
              message: "尚未收到支付平台支付成功的通知!",
              type: "error",
              duration: 2000,
            });
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    click_pay_failed() {
      this.buy();
    },
    getWxQr() {
      let that = this;
      this.wxpay = false;
      console.log(this.value01);
      switch (this.value01) {
        case 12:
          this.should_pay = 46656;
          this.on_sale = 19768;
          this.actual_pay = 26888;
          let time01 = new Date(that.vipEndTime.replace(/-/g, "/"));
          this.time = this.timestamp(
            time01.setMonth(time01.getMonth() + 12) / 1000,
            "Y-M-D"
          );
          break;
        case 6:
          this.should_pay = 23328;
          this.on_sale = 6440;
          this.actual_pay = 16888;
          let time02 = new Date(that.vipEndTime.replace(/-/g, "/"));
          this.time = this.timestamp(
            time02.setMonth(time02.getMonth() + 6) / 1000,
            "Y-M-D"
          );
          break;
        case 1:
          this.should_pay = 3888;
          this.on_sale = 0;
          this.actual_pay = 3888;
          let time03 = new Date(that.vipEndTime.replace(/-/g, "/"));
          this.time = this.timestamp(
            time03.setMonth(time03.getMonth() + 1) / 1000,
            "Y-M-D"
          );
          break;
      }
      console.log("should_pay", that.should_pay);
      console.log("on_sale", that.on_sale);
      console.log("actual_pay", that.actual_pay);
      this.$axios
        .post(
          "/api/pay/WXPayRequest",
          {
            OrderName: "抖音数据平台会员付费-Plus",
            Duration: that.value01,
            VipType: 2,
            MarketPrice: that.should_pay,
            RatePrice: that.on_sale,
            PayAmount: that.actual_pay,
            ReturnUrl: "https://dy.zsjx114.com" + that.$route.path,
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel01) that.cancel01();
              that.cancel01 = c;
            }),
          }
        )
        .then((response) => {
          if (response.data.code == 0) {
            this.wx_code = response.data.data.url;
            this.wxpay = true;
    
            this.loop = setInterval(() => {
              this.$axios(
                {
                  method: "get",
                  url: "/api/pay/GetOrderStatus",
                  params: {
                    orderid: response.data.data.orderId,
                  },
                },
                {
                  cancelToken: new that.$axios.CancelToken(function executor(
                    c
                  ) {
                    if (that.cancel03) that.cancel03();
                    that.cancel03 = c;
                  }),
                }
              )
                .then((response) => {
                  if (response.data.data.status == 1) {
                    clearInterval(this.loop);
                    this.$message({
                      message: "支付成功，正在为您跳转...",
                      type: "success",
                      duration: 2000,
                    });
                    setTimeout(() => {
                      location.replace(
                        "https://dy.zsjx114.com" + that.$route.path
                      );
                    }, 2000);
                  }
                })
                .catch((error) => {
                  clearInterval(this.loop);
                  console.log(error);
                });
            }, 1000);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    buy() {
      let that = this;
      if (this.value02 == 1) {
        // this.dialog02 = true;
        this.$axios
          .post("/api/pay/PayRequest", {
            OrderName: "抖音数据平台会员付费-SVIP",
            Duration: that.value01,
            VipType: 1,
            // MarketPrice: that.should_pay,
            // RatePrice: that.on_sale,
            // PayAmount: that.actual_pay,
            ReturnUrl: "https://dy.zsjx114.com" + that.$route.path,
          })
          .then((response) => {
            if (response.data.code == 0) {
              window.open(response.data.data.url, "_self");
              this.order_id = response.data.data.orderId;
            }
          })
          .catch((error) => {
            console.log(error);
          });
      } else {
        // this.wxpay = true;
      }
    },
    GetVipPrice() {
      this.$axios({
        method: "get",
        url: "api/pay/GetVipPrice",
        params: {
          VipType: 2,
          VipData: this.value01,
        },
      }).then((res) => {
        if (res.data.code == 0) {
          this.marketPrice = res.data.data.marketPrice;
          this.payAmount = res.data.data.payAmount;
          this.ratePrice = res.data.data.ratePrice;
        }
      });
    },
  },
};
</script>
<style lang='less' scoped>
#payEgBox {
  position: relative;
  .payEgBottomBox {
    background-color: #fff;
    height: 585px;
    border-radius: 4px;
    width: 100%;
    position: relative;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    .ul02 {
      display: flex;
      height: 342px;
      overflow-y: scroll;
      box-sizing: border-box;
      position: relative;
      width: 420px;
      li:last-child {
        margin-right: 0;
      }
      .wait {
        position: absolute;
        top: 180px;
        right: 166px;
        font-size: 14px;
        text-align: center;
        color: #c88d5a;
      }
      li {
        .p1 {
          font-size: 14px;
          color: #555555;
          margin-bottom: 18px;
        }
        .p2 {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .font_style {
            font-size: 14px;
            color: #555;
          }
          .img01 {
            width: 14px;
            height: 9px;
          }
          .img02 {
            width: 12px;
            height: 12px;
          }
          font-size: 16px;
          color: #222;
          margin-bottom: 18px;
        }
        .p3 {
          margin: 30px 0;
          width: 362px;
          height: 1px;
          background-color: #e5e5e5;
        }
        padding: 20px 30px;
        box-sizing: border-box;
        //   height: 2132px;
        background-color: #fafafa;
        border-radius: 4px;
        margin-right: 20px;
        width: 100%;
      }
    }
    .ul01 {
      display: flex;
      // margin-top: 45px;
      z-index: 2;
      > li {
        .s1 {
          text-align: center;
          color: #ba8150;
          > p:nth-child(1) {
            padding-top: 25px;
            font-size: 20px;
            img {
              width: 26px;
              height: 19px;
              margin-right: 9px;
              vertical-align: -3px;
            }
          }
          > p:nth-child(2) {
            margin-top: 13px;
            font-size: 14px;
          }
          > img:nth-child(3) {
            width: 327px;
            margin-bottom: 4px;
          }
          > p:nth-child(4) {
            font-size: 14px;
          }
          > p:nth-child(5) {
            margin-top: 0px;
            font-size: 30px;
            span {
              font-size: 60px;
            }
          }
          > button:nth-child(6) {
            margin-top: 6px;
            width: 127px;
            height: 44px;
            background-color: #737e9e;
            border-radius: 4px;
            text-align: center;
            line-height: 40px;
            font-size: 17px;
            color: #ffffff;
          }
        }
      }
      li {
        .f1 {
          box-sizing: border-box;
          width: 420px;
          height: 270px;
          background-image: linear-gradient(-39deg, #f2f1f1 0%, #fcfbfb 100%),
            linear-gradient(#cdcfd5, #cdcfd5);
          background-blend-mode: normal, normal;
          border-radius: 4px;
        }
        .s1 {
          box-sizing: border-box;
          width: 420px;
          height: 223px;
          background-image: linear-gradient(-39deg, #fdcda5 1%, #feeee0 100%),
        linear-gradient(#145bf3, #145bf3);
          background-blend-mode: normal, normal;
          border-radius: 4px;
        }
        width: 420px;
        //   margin-right: 20px;
      }
    }
    .payEgLeft {
      // width: 420px;
      padding-bottom: 20px;
      width: 41%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-color: #fafafa;
    }
    .payEgRight {
      // flex: 1;
      width: 59%;
      position: relative;
      .blob {
        font-weight: 600;
      }
      .dialog03 {
        .dialog_content {
          > p {
            margin-bottom: 20px;
            font-size: 20px;
            color: #222222;
            text-align: center;
          }
          > img {
            width: 180px;
            height: 180px;
          }
          background-color: #ffffff;
          border-radius: 4px;
          padding: 40px 72px;
          height: 307px;
          box-sizing: border-box;
          text-align: center;
        }
      }
      .dialog02 {
        .content {
          > img {
            cursor: pointer;
            position: absolute;
            right: -30px;
            top: -12px;
            width: 22px;
            height: 22px;
          }
          .d4 {
            .d6 {
              display: block;
              width: 220px;
              height: 48px;
              border: 1px solid #fd7f2c;
              border-radius: 4px;
              text-align: center;
              font-size: 16px;
              line-height: 44px;
              color: #fd7f2c;
              margin: 0 auto;
              margin-top: 50px;
              box-sizing: border-box;
            }
            .d5 {
              display: block;
              box-sizing: border-box;
              width: 150px;
              height: 48px;
              background-color: #fd7f2c;
              border-radius: 4px;
              text-align: center;
              font-size: 16px;
              line-height: 44px;
              color: #ffffff;
              margin: 0 auto;
              margin-top: 50px;
            }
            display: flex;
            align-items: center;
          }
          .d2 {
            img {
              height: 15px;
              vertical-align: -2px;
            }
            font-size: 16px;
            margin-top: 14px;
            color: #555;
            text-align: center;
          }
          .d1 {
            margin-bottom: 38px;
            font-weight: 600;
            font-size: 20px;
            color: #222222;
            text-align: center;
          }
          position: relative;
          width: 520px;
          text-align: center;
          padding: 50px 30px;
          box-sizing: border-box;
          background-color: #fff;
          margin: 0 auto;
          margin-top: 25vh;
        }
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999999;
        width: 100%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
      }
      .dialog01 {
        .content {
          .d5 {
            display: block;
            width: 150px;
            height: 48px;
            background-color: #fd7f2c;
            border-radius: 4px;
            text-align: center;
            font-size: 16px;
            line-height: 44px;
            color: #ffffff;
            margin: 0 auto;
            margin-top: 50px;
          }
          .d4 {
            margin-top: 14px;
            span {
              font-size: 14px;
              color: #555555;
            }
            color: #222;
          }
          .d3 {
            > div {
              text-align: center;
              img {
                width: 36px;
                height: 36px;
              }
              p {
                font-size: 14px;
                margin-top: 10px;
                color: #555555;
              }
            }
            > img {
              width: 13px;
              height: 12px;
              margin: 0 40px;
            }
            margin-top: 30px;
            margin-bottom: 50px;
            display: flex;
            align-items: center;
          }
          .d2 {
            font-weight: 600;
            font-size: 16px;
            color: #222222;
            text-align: left;
          }
          .d1 {
            font-weight: 600;
            font-size: 20px;
            color: #222222;
            text-align: center;
          }
          padding: 50px 30px;
          box-sizing: border-box;
        }
      }
      .buy {
        //   margin: 50px auto;
        //   margin-bottom: 0;
        position: absolute;
        left: 123px;
        bottom: 44px;
        display: block;
        text-align: center;
        width: 150px;
        height: 48px;
        background-color: #fd7f2c;
        border-radius: 4px;
        font-size: 16px;
        line-height: 44px;
        color: #ffffff;
      }
      ul {
        li:last-child {
          border-bottom: none;
        }
        li {
          padding: 20px 0;
          // border-bottom: 1px solid #e5e5e5;
          display: flex;
          align-items: center;
          > P {
            width: 63px;
            text-align: right;
            font-size: 14px;
            color: #222;
            margin-right: 22px;
          }
          .active {
            color: #1779ff !important;
            border-color: #1779ff !important;
            img {
              display: block !important;
            }
          }
          .s6 {
            font-size: 18px;
            color: #1779ff;
            > span:last-child {
              font-size: 14px;
              color: #555555;
              margin-left: 15px;
            }
          }
          .s5 {
            font-size: 18px;
            color: #fd7f2c;
            > span:last-child {
              font-size: 14px;
              color: #555555;
              margin-left: 15px;
            }
          }
          .s4 {
            font-size: 30px;
            color: #1779ff;
          }
          .s3 {
            display: flex;
            align-items: center;
            > p {
              font-size: 14px;
              color: #fd7f2c;
              position: absolute;
              right: 0;
            }
            > button:nth-child(2) {
              background-image: url("../assets/meng/b2.png") !important;
              background-size: 89px 24px;
            }
            button {
              img {
                display: none;
                width: 14px;
                height: 14px;
                position: absolute;
                bottom: -1px;
                right: -1px;
              }
              position: relative;
              text-align: center;
              width: 129px;
              height: 46px;
              border-radius: 4px;
              border: solid 1px #e5e5e5;
              margin-right: 16px;
              background-size: 68px 24px;
              background-repeat: no-repeat;
              background-position: center;
              background-image: url("../assets/meng/b3.png");
            }
          }
          .s2 {
            button {
              img {
                display: none;
                width: 14px;
                height: 14px;
                position: absolute;
                bottom: -1px;
                right: -1px;
              }
              position: relative;
              text-align: center;
              width: 129px;
              height: 46px;
              border-radius: 4px;
              border: solid 1px #e5e5e5;
              font-size: 16px;
              line-height: 42px;
              letter-spacing: 0px;
              color: #222222;
              margin-right: 16px;
            }
          }
          .s1 {
            display: flex;
            align-items: center;
            img {
              width: 26px;
              margin-right: 8px;
            }
            > span:nth-child(2) {
              font-size: 18px;
              color: #222222;
              margin-right: 32px;
            }
            > span:nth-child(3) {
              font-size: 18px;
              color: #1779ff;
            }
            .moreBuy {
              cursor: pointer;
              position: absolute;
              right: 52px;
              font-size: 14px;
              color: #fd7f2c;
              display: flex;
              justify-content: center;
              align-items: center;
              img {
                width: 6px;
                height: 10px;
                margin-left: 4px;
              }
            }
          }
        }
        width: 100%;
        margin: 0 auto;
        padding: 32px 0px 0px 43px;
        //   margin-top: 75px;
        position: relative;
        box-sizing: border-box;
        overflow: hidden;
      }
      .moneyBox {
        position: absolute;
        left: 133px;
        p {
          font-size: 14px;
          color: #555;
          padding: 10px 0;
        }
        p:nth-child(1) {
          padding-top: 0;
        }
        .shouldSpan {
          color: #222;
        }
        .saleSpan {
          color: #fd7f2c;
        }
        .timeSpan {
          color: #555;
          padding-right: 6px;
        }
      }
    }
  }
  .egText {
    width: 490px;
    height: 46px;
    line-height: 46px;
    background-color: #ffffff;
    border-radius: 23px;
    border: solid 2px #3079f6;
    color: #222222;
    font-size: 16px;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 20px;

    span {
      cursor: pointer;
      font-size: 16px;
      color: #3079f7;
      padding-left: 20px;
    }
  }
  .wxPay {
    background-color: #ffffff;
    border-radius: 4px;
    width: 130px;
    // padding: 40px 72px;
    // height: 307px;
    box-sizing: border-box;
    text-align: center;
    position: absolute;
    right: 90px;
    bottom: 139px;
    > p {
      // margin-bottom: 20px;
      font-size: 14px;
      color: #555;
      text-align: center;
      padding-top: 6px;
    }
    > img {
      width: 124px;
      height: 124px;
      display: block;
      margin: 0 auto;
    }
  }
}
</style>